<template>
  <div class="resultbar">
    <div class="list">
        <template v-for="(item,index) in itemdata" :key="index">
            <div class="muin">
               <div @click="clickitem(index)" :class="{item:true,active:currentindex==index}">
                {{ item.label }}
               </div>
            </div>
        </template>
    </div>
  </div>
</template>


<script setup>
import { ref } from "vue";

const props=defineProps({
    itemdata:{
        type:Object,
        default:{}
    }
})

let currentindex=ref(0)
const clickitem=(index)=>{
    currentindex.value=index
    // console.log(index);
    // console.log(currentindex);
}

</script>


<style lang="less" scoped>
.resultbar{
    width: 100%;
    .list{
            // padding: 10px 20px;
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            background-color: #fff;
            align-items: center;
            overflow-x: auto;
            text-align: center;


        .muin{
            // width: 50px;
            height: 30px;
            width: 100%;
            border-radius: 5px;
            font-size: 13px;
            margin-right: 20px;
            line-height: 30px;
            margin-top: 20px;
            color: #666;
            background-color: #ccc;
        
          .item{
            text-align: center;
            white-space: nowrap;
          }
        }
    }

}
.active{
        color: red;
    }
</style>